<!--课程考核实施计划变更申请记录-->
<template>
  <div class="change-record-assessment-container">
<!--    <div class="search-container">-->
<!--      <SelectItem-->
<!--        :name="'学期'"-->
<!--        :value="xq"-->
<!--        @change="-->
<!--          (e) => {-->
<!--            xq = e;-->
<!--          }-->
<!--        "-->
<!--        :xqList="xqList"-->
<!--      ></SelectItem>-->
<!--      <SelectItem-->
<!--        :name="'级次'"-->
<!--        :value="grade"-->
<!--        @change="-->
<!--          (e) => {-->
<!--            grade = e;-->
<!--          }-->
<!--        "-->
<!--        :xqList="gradeList"-->
<!--      ></SelectItem>-->
<!--      <SelectItem-->
<!--        :name="'专业'"-->
<!--        :value="specialty"-->
<!--        @change="-->
<!--          (e) => {-->
<!--            specialty = e;-->
<!--          }-->
<!--        "-->
<!--        :xqList="specialtyList"-->
<!--      ></SelectItem>-->
<!--      <InputItem-->
<!--        :name="'姓名'"-->
<!--        :value="stuName"-->
<!--        @input="-->
<!--          (e) => {-->
<!--            stuName = e;-->
<!--          }-->
<!--        "-->
<!--      ></InputItem>-->

<!--      <SelectItem-->
<!--        :name="'状态'"-->
<!--        :value="status"-->
<!--        @change="-->
<!--          (e) => {-->
<!--            status = e;-->
<!--          }-->
<!--        "-->
<!--        :xqList="stateList"-->
<!--      ></SelectItem>-->


<!--      <div class="search-button" style="margin-right: 25px;" @click="getSelectCondition">-->
<!--        <img src="../../../assets/assessment/icon-search.png" alt=""/>-->
<!--        <span>查询</span>-->
<!--      </div>-->
      <!--      <div class="add-button" @click="toChangeRecord()" style="width: 160px;">-->
      <!--&lt;!&ndash;        <img src="../../../assets/assessment/huankao.png" alt=""/>&ndash;&gt;-->
      <!--        <span>提交缓考申请</span>-->
      <!--      </div>-->
<!--    </div>-->
      <div class="search-container-item" style="display:inline;:margin-left:0">
        <span style="color: #004ca7;margin-top: 5px;">学期：</span>
        <el-select
          v-model="semester"
          style="width: 120px"
          size="mini"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in xueqiList"
            :key="item.value"
            :label="item.xqmc"
            :value="item.xqmc"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-button" style="display:inline-flex;margin-left:15px" @click="ByIdJueSe">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    <div class="table-container" style="margin-top:15px">
      <div class="table-header">
        <div class="item" style="width: 171px">教研室</div>
        <div class="item" style="width: 159px">课程名称</div>
        <div class="item" style="width: 148px">年级</div>
        <div class="item" style="width: 179px">教学班</div>
        <div class="item" style="width: 362px">专业班次</div>
        <div class="item" style="width: 158px">参评对象</div>
        <div class="item" style="width: 180px">修改说明</div>
        <div class="item" style="width: 145px">状态</div>
        <div class="item" style="width: 187px">操作</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item" style="width: 171px">{{ item.staffroom }}</div>
        <div class="item" style="width: 159px">{{ item.coursename }}</div>
        <div class="item" style="width: 148px">{{ item.grade }}</div>
        <div class="item" style="width: 179px">{{ item.classes }}</div>
        <div class="item-border right-content">
          <div class="right-content-info">
            <div class="item" style="width: 362px">{{ item.majorclasses }}</div>
            <div class="item" style="width: 158px">{{ item.teachername }}</div>
            <div class="item" style="width: 180px">{{ item.description }}</div>
            <div class="item" style="width: 145px" >
              <template>
                <span v-if="item.state == 32">
                审核通过
              </span>
                <span v-if="item.state == 31">
              待管理员审核
              </span>
                <span v-if="item.state == 12">
                待系领导审核
              </span>
                <span v-if="item.state == 0">
                待发起
              </span>
                <span v-if="item.state == 1">
                待课程负责人审核
              </span>
                <span v-if="item.state == 11">
                 待教研室主任审核
              </span>
                <span v-if="item.state == 23">
                管理员审核驳回
              </span>
                </template>
            </div>
            <div class="item" style="width: 187px">
              <div class="tj-button" style="cursor:pointer" @click="updateById(item.state,item.evalactorid)">提 交</div>
              <div class="xg-button" @click="showYprDial(item.state,item.teacherid,item.evalactorid)">修 改</div>
              <showYprDialog :dialogTitle="dialogTitle" :showYprDialog='showYprDialog'
                             @showYprDialClick="showYprDialClick"
                             @renew="renew"></showYprDialog>
            </div>
          </div>
          <div class="spjd">
            <div class="spjd-title">审批进度：</div> 
            <div class="time-line-horizon">
              <div class="time-line-block" style="width: 205px;" v-for="(block, index1) in item.pjChecks" :key="index1">
                <div class="person-name" style="width: 80%">{{ block.job }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-finish.png" alt="已完成" v-if="+block.state===1"/>
                  <img src="../../../assets/assessment/icon-dai.png" alt="待完成" v-if="+block.state===0"/>
                  <img src="../../../assets/assessment/icon-close.png" alt="未完成" v-if="+block.state===-1"/>
                  <div class="date-time">
                    <span class="date">{{ block.checkdate }}</span>
                    <span class="time">{{ block.time }}</span>
                  </div>
                </div>
                <!--                 1 待   0 已  2 未-->
                <div class="operate" v-if="index1===0">
                  <div class="ly-block" style="left:-120px;" @click="buttonClick('留言',block,index,item)">
                    <img src="../../../assets/assessment/icon-ly.png" alt=""/>
                    <div class="ly">留言</div>
                  </div>
                  <div class="bubble-block" style="width: 100%;top: -72px;">
                    <span @click="buttonClick('查看',block,index,item)"
                          style=" white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  display: block">{{
                        block.text
                      }}</span>
                    <div class="operate-button">
                      <div
                        class="button-ck"
                        @click="buttonClick('查看',block,index,item)"
                        v-show="block.text"
                      >
                        查看
                      </div>
                      <div
                        class="button-bj"
                        @click="buttonClick('编辑',block,index,item)"
                        v-show="block.text" v-if="item.state == 1 && index1 ==0"
                      >
                        编辑
                      </div>
                      <div
                        @click="buttonClick('删除',block,index,item)"
                        class="button-sc"
                        v-show="block.text" v-if="item.state == 1 && index1 ==0"
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
                <div class="operate" v-show="block.text" v-if="index1 !== 0">
                  <div class="bubble-block" style="width: 100%">
                    <span @click="buttonClick('查看',block,index,item)"
                          style=" white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  display: block">{{
                        block.text
                      }}</span>
                    <div class="operate-button">
                      <div
                        class="button-ck"
                        @click="buttonClick('查看',block,index,item)"
                        v-show="block.text"
                      >
                        查看
                      </div>
                      <div
                        class="button-bj"
                        @click="buttonClick('编辑',block,index,item)"
                        v-show="block.text" v-if="item.state == 1 && index1 ==0"
                      >
                        编辑
                      </div>
                      <div
                        @click="buttonClick('删除',block,index,item)"
                        class="button-sc"
                        v-show="block.text" v-if="item.state == 1 && index1 ==0"
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加留言"
      :visible.sync="showAddMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>添加留言：</div>
        <div>
          <el-input
            v-model="text1.text"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
<!--                      showbjMessageDialog = false-->
        <button class="green" @click="addText">
          确 定
        </button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑留言"
      :visible.sync="showbjMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>编辑留言：</div>
        <div>
          <el-input
            v-model="text1.text"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
<!--                      showbjMessageDialog = false-->
        <button class="green" @click="update">
          确 定
        </button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看留言"
      :visible.sync="showckMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>查看留言：</div>
        <div>
          <!--                        v-model="block.bjmeaasgeText"-->
          <el-input
            v-model="text1.text"
            type="textarea"
            :rows="8"
            style="width: 550px"
            disabled="false"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showckMessageDialog = false">
          确 定
        </button>
      </span>
    </el-dialog>

    <!--  导出Excel  -->
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt=""/>
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="教员评教信息.xls"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
    </div>
  </div>
</template>

<script>

import showYprDialog from "@/views/comonents/showYprDialog";

import {
  pjevalactor, textupdatesave, txtdelete, UpdateID, submitID, addText, ByIdJueSe, updateById
} from "../../../api/teacher/supervision";
import { reqGetXqList } from "@/api/course/courses";
import {mapGetters} from "vuex";

export default {
  components: {
    showYprDialog,
  },

  data() {
    return {
      semester:'',
      //导出Excel
      jsonFields: {
        教研室: "staffroom",
        课程名称: "coursename",
        年级: "grade",
        教学班: "classes",
        专业班次: "majorclasses",
        参评对象: "teachername",
        修改说明: "description",
      },

      xueqi:'2021春',
      text1:{
        text:'',
      },
      date: '',
      time: '',
      evalactorid: '',
      showYprDialog: '',
      dialogTitle: '',
      id: '1',
      eid: '',
      tid: '',
      tname: '',
      text: '',
      checkid: '',
      roleid:'',
      up: {
        classname: '',
        name: '',
      },
      eligibleaaa: {
        eid: '',
      },
      teacherid: '',
      tableData: [],
      //添加留言
      showAddMessageDialog: false,
      //编辑留言
      showbjMessageDialog: false,
      //查看留言
      showckMessageDialog: false,
      meaasgeText: "",
      course: "",
      showEditDialog: true,
      searchNameList: [],
      handleSelection: [],
      namelist: {},
      ul_list: [
        {id: 1, name: "张三丰", number: "23654236985", active: false},
        {id: 2, name: "张三丰", number: "23654236985", active: false},
        {id: 2, name: "张三丰", number: "23654236985", active: false},
        {id: 2, name: "张三丰", number: "23654236985", active: false},
        {id: 2, name: "张三丰", number: "23654236985", active: false},
      ],
      room: "",
      rooms: [
        {label: "部门一", value: "部门一"},
        {label: "部门二", value: "部门二"},
        {label: "部门三", value: "部门三"},
      ],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),

  },
  mounted() {
    // this.pjevalactor();
    this.getXqList();
  },
  methods: {
    // 获取学期院历列表
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xueqiList = result.data.data;
        this.semester = result.data.data.length > 0 ? result.data.data[0].xqmc: ''
        this.ByIdJueSe();
      }
    },
    //审核流
    buttonClick(type, black,index,row) {
      if (row.state == '1' || type == "查看") {
        this.text1 = {}
        console.log(black, 'black')
        this.text1 = {
          checkid: black.checkid,
          text: black.text,
          index:index
        };
        if (type === '留言') {
          this.showAddMessageDialog = true
          this.text1.text = ''
          console.log(this.text1)
        } else if (type === '查看') {
          this.showckMessageDialog = true,
            console.log(this.text1)
        } else if (type === '编辑') {
          this.showbjMessageDialog = true
          console.log(this.text1)
        } else if (type === '删除') {
          this.textdelete()
        }
       } else {
        this.$message("不能操作！");
        return
      }
    },

    //查看所有角色
    ByIdJueSe() {
      let obj = {
        xueqi: this.semester,
        // id:this.id,
      }
      ByIdJueSe(obj).then(res => {
        if (res.status == 200) {
          this.tableData = res.data.data
          if(res.data.data.length <= 0){
            this.$message({
              type:'info',message:'暂无数据'
            })
            return
          }
          console.log(this.tableData,'this.tableData=========角色=============')
          for (let i = 0; i < this.tableData.length; i++) {
            for (let x = 0; x < this.tableData[i].pjChecks.length; x++) {
              let pjChecks = this.tableData[i].pjChecks
              let role_id = this.userInfo.role_id
              console.log( this.userInfo.role_id,' this.userInfo.role_id')
              let roleid = this.tableData[i].pjChecks[x].roleid
              console.log(this.tableData[i].pjChecks[x].roleid,'this.tableData[i].pjChecks[x].roleid')
              console.log(this.tableData[i].pjChecks[x].state)
              pjChecks[x] = {
                checkdate: pjChecks[x].audittime.split('T')[0],
                time: pjChecks[x].audittime.split('T')[1],
                checkid: pjChecks[x].checkid,  //角色对应的id
                text: pjChecks[x].text, //留言
                job: pjChecks[x].job,  //角色名
                state: pjChecks[x].state,
              }
              if (role_id == roleid) {
                this.tableData[i].checkid = this.tableData[i].pjChecks[x].checkid
                // this.tableData[i].status = this.tableData[i].shspeeds[x].chstatus
                console.log(this.tableData[i].pjChecks[x].state)
              }
            }
          }
        }
      })
    },

    //教员评教信息核对(查询)EditUpdate(item.evalactorid)
    showYprDialClick: function (teacherid) {
      this.showYprDialog = teacherid
    },
    //点修改完成页面参评对象的修改
    showYprDial(bigState,teacherid, evalactorid) {
      if (bigState == 1) {
        this.evalactorid = evalactorid
        this.dialogTitle = '修改'
        this.showYprDialClick(teacherid)
      } else {
        this.$message("不能修改");
      }
    },
    //更新
    renew: function (id, name) {
      let obj = {
        evalactorid: this.evalactorid,
        teacherid: id,
        teachername: name
      }
      //修改传值
      return new Promise(() => {
        //网上评教修改保存
        UpdateID(obj).then(res => {
          this.ByIdJueSe();
        })
        console.log('renew', id, name)
      })
    },

    //提交     updateById
    updateById(bigState,evalactorid) {
      if (bigState == 1) {
        this.evalactorid = evalactorid
        let submit = {
          id: this.id,
          evalactorid: this.evalactorid,
          date: this.date,
          time: this.time,
        }
        updateById(submit).then(res => {
          this.$message({
            type: 'success',
            message: '申请成功'
          })
          this.ByIdJueSe()
        })
      } else {
        this.$message("不能提交");
      }
    },

    //教员评教信息核对(点击查看留言)
    textsave(checkid) {
      this.text1 = {
        text: this.text1.text,
        checkid: checkid,
      }
      this.text = this.text1.text
      console.log("======查看留言========", this.text, checkid)
      this.showckMessageDialog = true
      console.log(this.showckMessageDialog, 'this.showckMessageDialog')
    },

    //教员评教信息核对(修改留言)
    update() {
      let pj = this
      let obj = {
        checkid: this.text1.checkid,
        text: this.text1.text,
      }
        textupdatesave(obj).then(res => {
          if (res.status == 200) {
            pj.showbjMessageDialog = false;
            this.ByIdJueSe();
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });
          }
        })
      // })
    },

    //删除留言textdelete(block.checkid)
    textdelete() {
      let checkid = this.text1.checkid
      return new Promise(() => {
        txtdelete(checkid).then(res => {
          if (res.status == 200) {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            });
            this.ByIdJueSe();
          }
        })
        })
    },

    //添加留言
    addText() {
      console.log(this.tableData[this.text1.index].pjChecks[this.text1.index].checkid,
        'this.tableData[this.text1.index].checkid,')
      let pj = this
      let obj = {
        checkid: this.tableData[this.text1.index].pjChecks[0].checkid,
        text: this.text1.text,
      }
      return new Promise(() => {
        addText(obj).then(res => {
          if(res.status == 200) {
            pj.showAddMessageDialog = false
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            });
            this.ByIdJueSe();
          }
        })
      })
    },
    change() {
      this.$nextTick(() => {
        let nodelist = document.querySelectorAll(".el-select__tags-text");
        if (nodelist.length >= 2) {
          nodelist[1].innerText = `(已选${this.zt.length})`;
        }
      });
    },
    toChangePlanDetail() {
      this.$router.push("/teacher/assessment/changeRecordDetail");
    },
    activeLi(item) {
      item.active = !item.active
    }
  },
};
</script>

<style lang="less" scoped>
.search-button {
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  width: 78px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  opacity: 1;
  border-radius: 6px;
  padding: 2px 9px;

  > img {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
    margin-right: 5px;
  }

  > span {
    font-size: 16px;
    font-weight: 400;
    color: #51aef6;
  }
}
.cancle-button {
  .confirm-button;
  background: #ffefef;
  border: 1px solid #ff3819;
  color: #ff3819;
  margin-right: 0px;
}

.confirm-button {
  width: 87px;
  height: 36px;
  padding: 0;
  background: #f1fff8;
  border: 1px solid #02c86c;
  border-radius: 4px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #02c86c;
  cursor: pointer;
  margin-right: 92px;
}

.choose-ypr-container {
  width: 767px;
  margin: 0px auto;

  .choose-ypr-search-container {
    .el-input--prefix .el-input__inner {
      padding-left: 30px;
    }

    .el-input__inner {
      &::placeholder {
        color: #b8b8b8;
      }

      &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #b8b8b8;
      }

      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #b8b8b8;
      }

      &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #b8b8b8;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #b8b8b8;
      }
    }

    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
      margin-right: 5px;
    }

    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }

      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }

    .button-list {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 21px;

      .button-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 69px;
        height: 27px;
        line-height: 27px;
        border: 1px solid #004ca7;
        border-radius: 4px;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;

        .del-icon {
          position: absolute;
          right: 0px;
          top: 0px;
          width: 12px;
          height: 12px;
          padding: 2px;
        }
      }
    }
  }

  .choose-ypr-table-container {
    margin-top: 30px;

    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 57px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 51px;
    }

    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}

.change-record-assessment-container {
  .edit-message-container {
    .el-dialog__body {
      padding: 29px 193px 66px;

      > div {
        > div {
          &:nth-child(1) {
            margin-bottom: 20px;

            > div {
              display: inline-block;

              &:nth-child(1) {
                font-size: 18px;
                font-weight: bold;
                line-height: 20px;
                color: #004ca7;
              }

              &:nth-child(2) {
                > div {
                  display: inline-block;
                  border: 1px solid #004ca7;
                  border-radius: 4px;
                  margin-right: 10px;
                  font-size: 14px;
                  font-weight: 400;
                  padding: 4px 17px 4px 10px;
                  color: #004ca7;
                  position: relative;

                  > img {
                    cursor: pointer;
                    position: absolute;
                    top: 3px;
                    right: 5px;
                  }
                }
              }
            }
          }

          &:nth-child(2) {
            margin-bottom: 26px;

            > div {
              display: inline-block;
              vertical-align: middle;

              &:nth-child(1) {
                font-size: 18px;
                font-weight: bold;
                line-height: 20px;
                color: #004ca7;
              }

              .search-input {
                display: inline-block;
                position: relative;
                margin-right: 20px;
                margin-left: 30px;

                .el-input__inner {
                  padding-left: 34px;
                }

                > img {
                  position: absolute;
                  top: 6px;
                  left: 10px;
                  z-index: 99;
                }
              }

              .search-button {
                vertical-align: middle;
                display: inline-block;
                cursor: pointer;
                width: 78px;
                height: 27px;
                background: #f1f8fe;
                border: 1px solid #51aef6;
                opacity: 1;
                border-radius: 6px;
                padding: 2px 9px;

                > img {
                  width: 20px;
                  height: 20px;
                  vertical-align: -4px;
                  margin-right: 5px;
                }

                > span {
                  font-size: 16px;
                  font-weight: 400;
                  color: #51aef6;
                }
              }
            }
          }
        }

        > ul {
          list-style: none;

          li {
            display: inline-block;
            width: 244px;
            height: 74px;
            background: rgba(77, 129, 192, 0.04);
            border: 1px solid #004ca7;
            border-radius: 5px;
            padding: 11px 27px;
            margin-bottom: 36px;
            position: relative;
            cursor: pointer;

            > img {
              display: none;
            }

            &.active {
              background: #004ca7;

              > img {
                display: block;
                position: absolute;
                top: 7px;
                right: 7px;
              }

              > div {
                color: white;
              }
            }

            &:nth-child(3n-1) {
              margin-left: 61px;
              margin-right: 61px;
            }

            > div {
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
              margin-bottom: 10px;

              > span {
                font-weight: 400;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 132px;

      .dialog-footer {
        > button {
          &:nth-child(1) {
            width: 87px;
            height: 36px;
            background: #fff6ef;
            border: 1px solid #f3b815;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 400;
            color: #f3b815;
            margin-right: 117px;
          }

          &:nth-child(2) {
            width: 87px;
            height: 36px;
            background: rgba(255, 239, 239, 1);
            border: 1px solid rgba(255, 56, 25, 1);
            border-radius: 6px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/info-check.less";

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.message-container {
  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {
    }
  }
}
</style>
